import { Typography } from 'antd';
import { useTranslation } from 'react-i18next';

import { CausesSolutionProps } from '../type';

const { Title, Text, Paragraph } = Typography;

const CauseSolutions: React.FC<CausesSolutionProps> = props => {
  const { type, hasCompare, solutions, extra } = props;
  const { t } = useTranslation();

  const renderSolutions = () => {
    const jsxArr = [];
    for (let i = 1; i < solutions + 1; i++) {
      jsxArr.push(
        <li key={i}>
          <Text>{t(`${type}.solutions.${i}`)}</Text>
        </li>,
      );
    }
    return jsxArr;
  };

  return (
    <Typography style={{ padding: 0 }}>
      {/* Cause */}
      <Title italic level={4}>
        {t('causes')}
      </Title>
      <Text>{t(`${type}.cause`)}</Text>
      {/* Compare */}
      {hasCompare && (
        <>
          <Title italic level={4}>
            {t('compare')}
          </Title>
          <Paragraph>
            <Text>{t(`${type}.compare`)}</Text>
          </Paragraph>
        </>
      )}
      {/* Solutions */}
      <Title italic level={4}>
        {t('solutions')}
      </Title>
      <ul>{renderSolutions()}</ul>
      {extra}
    </Typography>
  );
};

export default CauseSolutions;
